<template>
	<view class="newrecommend">
		<!--  @click.stop="goPage(item.path,item.privilegeId,item)" -->
		<view class="newrecommend_itembox" v-for="(item,index) in coupon" :key="index"  @click.stop="goPage(item.path,item.privilegeId,item)">
			<view class="newrecommend_leftbox">
				<image class="newrecommend_leftimg"  :src="item.src"></image>
				<view v-if="item.hasBuy" class="newrecommend_leftboxboard">
					<p class="newrecommend_leftboxboardtitle">HAVE</br>PURCHASED</p>
				</view>
			</view>
			<view class="newrecommend_dotted"></view>
			<view class="newrecommend_rightbox">
				<view class="newrecommend_rightboxtilte">{{item.name}}</view>
				<view class="newrecommend_rightboxtilteenglish">{{item.privilegeNameEn}}</view>
				<view class="newrecommend_rightboxtiltetext">{{item.privilegeTitle}}</view>
				<view class="newrecommend_rightboxtiltecost">
					<image class="newrecommend_rightboxtiltecostimg" src="https://s4.ax1x.com/2022/01/27/7OzOgS.png"></image>
					<span class="newrecommend_rightboxtiltecosttrue">{{item.mian | mian(item.consumeType)}}面值</span>
				</view>
			</view>
		</view>
		<view class="myLoading">
			<loading :toast="status" :title="'暂未特权卡'"></loading>
		</view>
	
	</view>
</template>

<script>
	import loading from "@/components/loading/loading.vue"
	export default {
		props: {
			status: {
				type: String
			},
			coupon: {
				type: Array
			},
			loadStatus: {
				type: String,
				default: 'loadmore'
			},
			Status: {
				type: String,
				default: 'default'
			},

		},
		data() {
			return {
				isYY: true,
				title: 'recommend',
				isShow: false,
				newQr: {},
				iconType: 'flower',
				loadText: {
					loadmore: '已经到底部了',
					loading: '努力加载中',
					nomore: '已经到底部了'
				},
			}
		},
		components:{
			loading
		},
		created() {
			console.log("coupon--->",this.coupon);
			// debugger
		},
		watch:{
			coupon(newVal,oldVal){
				console.log("coupon--->",newVal);
			}
		},
		filters: {
			price(val, consumeType) {
				let newVal = consumeType == 2 ? '' : val;
				return newVal
			},
			mian(val, consumeType) {
				let newVal = consumeType == 1 ? '' : val;
				return newVal
			}
		},
		methods: {
			ff_qrBreak(userPrivilegeId){
				this.$apis.privilegeQrCode(userPrivilegeId).then(res=>{
					if(res.code == 200){
						// debugger
						let newObj = JSON.parse(JSON.stringify(this.newQr));
						newObj.qrCode = res.data;
						this.newQr = JSON.parse(JSON.stringify(newObj));
						uni.showToast({
							title:"成功刷新"
						})
					}
				})
			},
			addRandomData() {
				this.$emit("addRandomDatas")
			},
			goPage(path, index, data) {
				    this.$emit("updataShow",Number(uni.getStorageSync('registerToast')))
		        	 // Number(uni.getStorageSync('registerToast'));
					if (Number(uni.getStorageSync('registerToast')) == 2) {
						let newPath = "";
						if (this.Status == "default") {

							newPath = `${path}?state=${2}&privilegeId=${index}`;
							uni.navigateTo({
								url: newPath
							})
						} else if (this.Status == "bought") {
							let newQr = {};
							this.newQr = data;
						}


					}
			


			},
			ff_show01() {
				this.isShow = false;

			},
			go(path, privilegeId) {
				// debugger/''
				let newPath = `${path}?state=${0}&privilegeId=${privilegeId}`;
				this.ff_show01();
				uni.navigateTo({
					url: newPath
				})
			}
		}
	}
</script>

<style lang="scss">
	.newrecommend {
		width: 100%;
		padding: 0 32rpx;
		display: flex;
		flex-wrap: wrap;

.newrecommend_itembox{
	width: 686rpx;
	height: 272rpx;
	background: #f6f6f6;
	opacity: 1;
	border-radius: 22px;
	display: flex;
	margin-bottom: 24rpx;
	overflow: hidden;
}
.newrecommend_leftbox{
	// flex: 1;
	flex: 0 0 272rpx;
	width: 272rpx;
	height: 100%;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;
	.newrecommend_leftimg{
       width: 208rpx;
	   height: 208rpx;
	}
	.newrecommend_leftboxboard{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.39);
		display: flex;
		align-items: center;
	}
	.newrecommend_leftboxboardtitle{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		color: #fff;
		width: 100%;
		text-align: center;
	}
}
.myLoading{
	width: 100%;
	    display: flex;
	    justify-content: center;
	    position: relative;
	    left: -31rpx;
	    box-sizing: border-box;
	// bottom: 0;
}
// 			<view class="newrecommend_rightbox">
// 				<view class="newrecommend_rightboxtilte">亚面周边</view>
// 				<view class="newrecommend_rightboxtilteenglish">Asia Chimian Object</view>
// 				<view class="newrecommend_rightboxtiltetext">一个吧鼠标垫和电脑包结合的物件</view>
// 				<view class="newrecommend_rightboxtiltecost">
// 					<image class="newrecommend_rightboxtiltecostimg" src="../../static/共创%20-%20详情_slices/组%2028@3x.png"></image>
// 					<span class="newrecommend_rightboxtiltecosttrue">200面值</span>
// 				</view>
// 			</view>
.newrecommend_rightbox{
	flex: 1;
	width: calc(100% - 276rpx);
	padding: 40rpx;
	padding-right: 14rpx;
	box-sizing: border-box;
}
.newrecommend_rightboxtilte{
	width: 100%;
	height: 48rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: 600;
	line-height: 48rpx;
	color: #000000;
	overflow:hidden;
	text-overflow:ellipsis;//文本溢出显示省略号
	white-space:nowrap;//文本不会换行
}
.newrecommend_rightboxtilteenglish{
	width: 100%;
	height: 34rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 600;
	line-height: 34rpx;
	color: #020604;
	overflow:hidden;
	text-overflow:ellipsis;//文本溢出显示省略号
	white-space:nowrap;//文本不会换行
}
.newrecommend_rightboxtiltetext{
	width: 100%;
	height: 34rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 600;
	line-height: 34rpx;
	color: #767777;
	margin-top: 8rpx;
	overflow:hidden;
	text-overflow:ellipsis;//文本溢出显示省略号
	white-space:nowrap;//文本不会换行
}
.newrecommend_dotted{
	flex: 0 0 4rpx;
	border-left: 4rpx dashed #C5C6C3;
	position: relative;
	&::after{
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: -12rpx;
		left: -12rpx;
	}
	&::before{
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		bottom: -12rpx;
		left: -12rpx;
	}
}
.newrecommend_rightboxtiltecost{
	padding: 6rpx 24rpx;
	border-radius: 36rpx;
	background-color: #c4292b;
	display: inline-block;
	margin-top: 16rpx;
	
	
}
.newrecommend_rightboxtiltecostimg{
	width: 32rpx;
	height: 32rpx;
	position: relative;
	top: 4rpx;
	margin-right: 4rpx;
}
.newrecommend_rightboxtiltecosttrue{
	height: 40rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 600;
	line-height: 40rpx;
	color: #FFFFFF;
}
	}
</style>
